<template>
	<view class="box">
		<view class="txt">
			小默升学
		</view>
		<button class="btn" type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" @tap="logCode"
			v-if="Agreement">手机号快捷登录</button>
		<button class="btn" type="default" @click="Quicklogin()" v-else-if='!Agreement'>手机号快捷登录</button>
		<view class="checked">
			<checkbox-group @change='Agreem'>
				<label>
					<checkbox style="transform:scale(0.6)" :checked='Agreement' />
				</label>
			</checkbox-group>
			<view class="text">
				<text class="text">我已阅读并同意《用户协议》,未注册的手机号或 第三方账号验证后将自动创建新账号</text>
			</view>
		</view>
		<view class="icon">
			<view class="icon-one" @click="toPhone" style="margin-right: 140rpx;">
				<view class="iconx">
					<image src="https://img.wilmer.com.cn/admin/2024/3-20/shouji.png" alt="" />
				</view>
				<text>验证码登录</text>
			</view>
			<view class="icon-one" @click="toPassword">
				<view class="iconx">
					<image src="https://img.wilmer.com.cn/admin/2024/3-20/mina.png" alt="" />
				</view>
				<text>密码登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import {
		wxLogin
	} from '@/common/api/login.js'
	export default {
		data() {
			return {
				Agreement: false, // 是否勾选用户协议
				loginCode: ""
			}
		},
		methods: {
			...mapActions(['handSetToken']),
			toPhone() {
				uni.navigateTo({
					url: '../Login/Login?flag=1'
				})
			},
			toPassword() {
				uni.navigateTo({
					url: '../Login/Login?flag=0'
				})
			},
			Agreem(e) {
				this.Agreement = !this.Agreement
			},
			Quicklogin() {
				if (!this.Agreement) {
					this.$toast('请先阅读规则说明')
					return false
				}
			},
			logCode() {
				// uni.preLogin({
				// 	provider: 'univerify',
				// 	success(){  //预登录成功
				// 		// 显示一键登录选项
				// 	},
				// 	fail(res){  // 预登录失败
				// 		// 不显示一键登录选项（或置灰）
				//     // 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
				// 		console.log(res.errCode)
				// 		console.log(res.errMsg)
				// 	}
				// })
				var that = this
				uni.login({
					"provider": "weixin",
					success(res) {
						that.loginCode = res.code
					}
				})
			},
			getPhoneNumber(e) {
				let that = this
				if (e.detail.errMsg == "getPhoneNumber:ok") { // 用户允许或去手机号
					uni.showLoading({
						title: '登陆中'
					});
					wxLogin({
						loginCode: this.loginCode,
						phoneCode: e.detail.code
					}).then(res => {
						uni.hideLoading();
						that.$toast('登录成功', 'success');
						that.handSetToken(res.data.token);
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/customer/main"
							})
						}, 500);
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding-top: 163px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.txt {
		font-size: 24px;
		text-align: center;
	}

	::v-deep .btn {
		margin-top: 109px;
		width: 100%;
		background-color: #00D000;
		height: 44px;
		line-height: 44px;
		text-align: center;
		color: #fff;
		border-radius: 26px;
	}

	.checked {
		display: flex;
		margin-top: 20px;
	}

	.text {
		font-size: 12px;
		color: #999999;
	}

	.icon-one {
		display: inline-block;
		font-size: 14px;
		color: #999999;

		.iconx {
			margin: auto;
			background-color: #00D000;
			width: 40px;
			height: 40px;
			border-radius: 50%;

			image {
				width: 30px;
				height: 30px;
				transform: translateY(4px);
			}

			margin-bottom:10rpx;
		}

		text {
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 400;
			ccolor: #999999;
		}
	}

	.icon {
		text-align: center;
		margin-top: 192px;
	}
</style>